<template>
    <view
        class="s-c-t-f s-f"
        :style="!isExpand ? 'width: calc(100% - 984px);' : ''"
    >
        <view class="s-c-t-box">
            <view>{{ saleFlowTxt }}</view>
            <view>{{ saleFlow12MoonsTxt }}</view>
        </view>
        <view class="list-box">
            <view class="l-tit">
                <view class="t-txt">{{ listTitArr[0] }}</view>
                <view class="t-txt">{{ listTitArr[1] }}</view>
                <view class="t-txt">{{ listTitArr[2] }}</view>
                <view class="t-txt">{{ listTitArr[3] }}</view>
                <view class="t-txt">{{ listTitArr[4] }}</view>
            </view>
            <view id="list" class="l-box comm-list">
                <view
                    class="list"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="clickItem(item)"
                >
                    <view class="l-n-d-a">{{
                        group == 1 || !group ? item.timestr : item.time
                    }}</view>
                    <view class="l-n-d-a">{{ item.amount }}</view>
                    <view class="l-n-d-a">{{ item.profit }}</view>
                    <view class="l-n-d-a">{{ item.num_od }}</view>
                    <view class="l-n-d-a">{{ item.num_od }}</view>
                    <view class="l-n-d-a"
                        >{{ item.number
                        }}<text class="icon-font arrow-xiala-font"
                            >&#xe600;</text
                        ></view
                    >
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import lang from "../../../js/conf/Lang.js";
import util from "../../../js/util/Util.js";
import { mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters(["isExpand"]),
    },
    data() {
        return {
            saleFlowTxt: lang.report.saleFlowTxt,
            saleFlow12MoonsTxt: lang.report.saleFlow12MoonsTxt,

            listTitArr: [lang.dateTxt, "卖量", "买量", "卖出", "买进", "利润"],
            list: [],
            group: 1,
        };
    },
    methods: {
        initData(group, data) {
            console.log("group", group);
            this.group = group;
            this.list = data;
        },

        clickItem(item) {
            this.$emit("saleBunsinessIncome", item, this.group);
        },

        handlerScroll() {
            let self = this;
            this.$nextTick(() => {
                var flag = util.scrollData("#list");
                if (flag) {
                    this.$emit("loadFlowsList");
                }
            });
        },
    },

    mounted() {
        if (document.querySelector("#list"))
            document
                .querySelector("#list")
                .addEventListener("scroll", this.handlerScroll, true);
    },
    destroyed() {
        if (document.querySelector("#list"))
            document
                .querySelector("#list")
                .removeEventListener("scroll", this.handlerScroll);
    },
};
</script>

<style lang="scss">
.s-c-t-f {
    width: calc(100% - 1152px);
    height: 100%;
    // padding: 10px;
    border-right: 1px solid #ededed;
    .s-c-t-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
    }
    .list-box {
        width: 100%;
        height: 100%;
        .l-tit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            background-color: #fafafa;
            .t-txt {
                width: 20%;
                text-align: center;
            }
        }
        .l-box {
            height: calc(100% - 80px);
            padding-bottom: 30px;
            .list {
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                padding: 10px 0;
                .l-n-d-a {
                    position: relative;
                    text-align: center;
                    width: 20%;
                    .arrow-xiala-font {
                        // padding-left: 10px;
                        position: absolute;
                        right: 5px;
                    }
                }
                .l-n-d-a-w {
                    width: 20%;
                    text-align: right;
                }
            }

            .list:hover {
                color: #3388ff;
                background-color: #ededed;
            }
        }
    }
}
</style>
